<template>
<view class="content">
	<img src="/static/guide/6.jpg" alt="" class="rounded-image"/>
  <view class="hotel-info">
    <text class="hotel-name">佛山祖庙</text>
    <text class="date">路线 2024-11-20</text>
    <text class="description">
‌佛山祖庙的路线可以从祖庙地铁站出发，经过梁园、燎原路、岭南天地、祖庙、垂虹路等地，最后返回祖庙地铁站。
</text>
  </view>
 
</view>
</template>
<style>
.content {
  display: flex;
  flex-direction: column;
}

.hotel-info {
  margin-bottom: 20px;
   display: flex;
  flex-direction: column; 
}

.hotel-name {
  font-size: 20px;
  font-weight: bold;
}

.date {
  color: #888;
}

.description {
  color: #333;
  line-height: 1.6;
}

.hotel-image image {
  width: 100%;
  height: auto;
}/* 页面整体布局 */
.content {
  display: flex;
  flex-direction: column;
  padding: 20px; /* 增加内边距 */
  background-color: #f5f5f5; /* 设置背景颜色 */
}

/* 酒店信息区域 */
.hotel-info {
  background-color: #fff; /* 设置背景颜色 */
  padding: 15px; /* 增加内边距 */
  border-radius: 8px; /* 添加圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影 */
  margin-bottom: 20px;
}

.hotel-name {
  font-size: 24px; /* 增大字体大小 */
  font-weight: bold;
  color: #333; /* 设置颜色 */
}

.date {
  color: #888;
  margin-top: 5px; /* 增加顶部边距 */
}

.description {
  color: #666;
  line-height: 1.8; /* 增加行高 */
  margin-top: 10px; /* 增加顶部边距 */
}

/* 酒店图片区域 */
.hotel-image {
  margin-bottom: 20px; /* 增加底部边距 */
}

.hotel-image image {
  width: 100%;
  border-radius: 8px; /* 添加圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 添加阴影 */
}
.rounded-image {
  width: 100%; /* 图片宽度 */
  border-radius: 15px; /* 圆角效果 */
  object-fit: cover; /* 保持图片比例 */
}
</style>